\r\n\r\n data-anim-off-observer - add this class when visible to start animation\r\n data-anim-off-observer-once - should class be added only once - to be\r\n used with non looping animatios like:\r\n\r\n .someClass {\r\n animation: upAndDownMouse 5s ease-in infinite;\r\n }\r\n\r\n*/\r\n\r\nexport default class AnimOffObserver {\r\n\r\n constructor(debug = false) {\r\n this.debug = debug;\r\n this.debug && console.log('AnimOffObserver init');\r\n\r\n if (this.setVars()) this.setEvents();\r\n }\r\n\r\n\r\n setVars()\r\n {\r\n // this.elemArr = [...document.querySelectorAll('[data-anim-off-observer]')];\r\n this.elemsNodeList = document.querySelectorAll('[data-anim-off-observer]');\r\n if (!this.elemsNodeList.length) return;\r\n\r\n this.DELAY_INIT = 500;\r\n this.THRESHOLD_1 = 0.01;\r\n\r\n return true;\r\n }\r\n\r\n\r\n setEvents()\r\n {\r\n // window.addEvent('load', () => {\r\n // setTimeout(() => {\r\n this.debug && console.log('[AnimOffObserver] setting up for ', this.elemsNodeList[0])\r\n setTimeout(() => {\r\n this.setupObserver();\r\n this.elemsNodeList.forEach((el) => {\r\n // if (this.debug) console.log('setting observer to: ', el);\r\n this.observer.observe(el);\r\n });\r\n }, this.DELAY_INIT);\r\n // }, 0);\r\n // });\r\n\r\n this.setupObserver();\r\n }\r\n\r\n setupObserver()\r\n {\r\n const options = {\r\n // root: document.querySelector('main'),\r\n rootMargin: '0px',\r\n threshold: [this.THRESHOLD_1],\r\n root: null,\r\n };\r\n\r\n const callback = (entries/* , observer */) => {\r\n // console.log(entries, observer);\r\n\r\n this.doActionsForOnIntersect(entries.filter(el => el.isIntersecting === true));\r\n this.doActionsForOffIntersect(entries.filter(el => el.isIntersecting === false));\r\n };\r\n\r\n this.observer = new IntersectionObserver(callback, options);\r\n }\r\n\r\n // eslint-disable-next-line class-methods-use-this\r\n doActionsForOnIntersect(entries)\r\n {\r\n entries.forEach((entry) => {\r\n // console.log('on', entry.target);\r\n entry.target.addClass(entry.target.getAttribute('data-anim-off-observer'));\r\n\r\n if (entry.target.getAttribute('data-anim-off-observer-once')) {\r\n // console.log('unobserving', entry.target);\r\n this.observer.unobserve(entry.target);\r\n }\r\n });\r\n }\r\n\r\n // eslint-disable-next-line class-methods-use-this\r\n doActionsForOffIntersect(entries)\r\n {\r\n entries.forEach((entry) => {\r\n // console.log('OFF', entry.target);\r\n entry.target.removeClass(entry.target.getAttribute('data-anim-off-observer'));\r\n });\r\n }\r\n}\r\n","import Swiper from 'swiper/js/swiper';\nimport 'swiper/css/swiper.css';\n\n\nexport default class Carousel\n{\n constructor()\n {\n if (!this.setVars()) return;\n\n this.initialState();\n this.checkWidth();\n this.buildMainImageSlider();\n this.buildThumbsSlider();\n this.buildTextSlider();\n this.setEvents();\n }\n\n setVars()\n {\n this.carousel = document.querySelector('.carousel');\n if (!this.carousel) return;\n\n this.language = document.querySelector('html').getAttribute('dir');\n\n this.buttonNext = this.carousel.querySelector('.carousel__next');\n this.buttonPrev = this.carousel.querySelector('.carousel__prev');\n\n this.images = this.carousel.querySelector('.carousel__images');\n this.thumbs = this.carousel.querySelector('.carousel__thumbs');\n this.text = this.carousel.querySelector('.carousel__info');\n\n this.numberOfSlides = this.images.querySelectorAll('.swiper-slide').length;\n\n this.activeSlideIndex = 0;\n this.lastSlideIndex = this.numberOfSlides - 1;\n\n this.swpierThumbs = null;\n\n this.settings = {\n delayTime: 2000,\n speed: 2000,\n atts: {\n activeSlide : 'data-swiper-slide-index',\n },\n breakpoints: {\n largePhone : 480,\n tablet : 767,\n largeTablet : 1023,\n laptop : 1279,\n }\n }\n\n return true;\n }\n\n setEvents()\n {\n window.addEventListener('resize', () => {\n this.checkWidth();\n });\n\n // this.swpierThumbs.on('slideChange', () => {\n // this.activeSlideIndex = this.swpierThumbs.realIndex;\n\n // this.swiperImages.slideToLoop(this.activeSlideIndex);\n // this.swiperText.slideToLoop(this.activeSlideIndex);\n // })\n\n this.swiperImages.on('slideChange', () => {\n this.changeSlides(this.swiperImages);\n });\n\n this.swpierThumbs.on('click', (e) => {\n this.changeSlidesOnClick(e);\n })\n }\n\n initialState()\n {\n if (this.language === 'rtl') {\n this.images.setAttribute('dir', 'rtl');\n this.thumbs.setAttribute('dir', 'rtl');\n this.text.setAttribute('dir', 'rtl');\n } else {\n this.images.setAttribute('dir', 'ltr');\n this.thumbs.setAttribute('dir', 'ltr');\n this.text.setAttribute('dir', 'ltr');\n }\n }\n\n buildMainImageSlider()\n {\n this.swiperImages = new Swiper(this.images, {\n loop: true,\n slidesPerView: 1,\n spaceBetween: 1,\n normalizeSlideIndex: true,\n autoplay: {\n delay: this.settings.delayTime,\n disableOnInteraction: false,\n },\n navigation: {\n nextEl: this.buttonNext,\n prevEl: this.buttonPrev,\n },\n });\n }\n\n buildThumbsSlider()\n {\n this.swpierThumbs = new Swiper(this.thumbs, {\n spaceBetween: 16,\n slidesPerView: 4,\n initialSlide: 1,\n loop: true,\n normalizeSlideIndex: true,\n navigation: {\n nextEl: this.buttonNext,\n prevEl: this.buttonPrev,\n },\n });\n }\n\n buildTextSlider()\n {\n this.swiperText = new Swiper(this.text, {\n loop: true,\n simulateTouch: false,\n navigation: {\n nextEl: this.buttonNext,\n prevEl: this.buttonPrev,\n },\n });\n }\n\n changeSlides(slider)\n {\n this.activeSlideIndex = slider.realIndex;\n this.thumbSlideIndex = this.activeSlideIndex + 1;\n\n this.swiperText.slideToLoop(this.activeSlideIndex);\n this.swpierThumbs.slideToLoop(this.thumbSlideIndex);\n }\n\n changeSlidesOnClick(event)\n {\n this.activeSlideIndex = parseInt(event.target.parentElement.getAttribute(this.settings.atts.activeSlide));\n this.thumbSlideIndex = this.activeSlideIndex + 1;\n\n this.swpierThumbs.slideToLoop(this.thumbSlideIndex);\n this.swiperImages.slideToLoop(this.activeSlideIndex);\n this.swiperText.slideToLoop(this.activeSlideIndex);\n }\n\n checkWidth()\n {\n const width = window.innerWidth;\n\n if (width < this.settings.breakpoints.largePhone) {\n if (this.swpierThumbs !== null) {\n this.swpierThumbs.destroy(true, false);\n }\n } else {\n if (this.swpierThumbs === null) {\n this.buildThumbsSlider();\n }\n }\n }\n}\n","export default class Contrast\r\n{\r\n constructor()\r\n {\r\n if (!this.setVars()) return;\r\n\r\n this.setInitiatlState();\r\n this.setEvents();\r\n }\r\n\r\n setVars()\r\n {\r\n this.toolbar = document.querySelector('.toolbar__items');\r\n if (!this.toolbar) return;\r\n\r\n this.switch = this.toolbar.querySelector('.toolbar__itemLink--colors');\r\n this.body = document.querySelector('body');\r\n\r\n return true;\r\n }\r\n\r\n setEvents()\r\n {\r\n this.switch.addEventListener('click', e => {\r\n e.preventDefault();\r\n this.changeContrast();\r\n });\r\n }\r\n\r\n changeContrast()\r\n {\r\n if (this.body.classList.contains('contrast')) {\r\n this.body.classList.remove('contrast');\r\n localStorage.removeItem('contrast');\r\n } else {\r\n this.body.classList.add('contrast');\r\n localStorage.setItem('contrast', 1);\r\n }\r\n }\r\n\r\n setInitiatlState()\r\n {\r\n let state = localStorage.getItem('contrast');\r\n\r\n if (state) {\r\n this.body.classList.add('contrast');\r\n } else {\r\n this.body.classList.remove('contrast');\r\n }\r\n }\r\n}\r\n","export default class FontSize\r\n{\r\n constructor()\r\n {\r\n if (!this.setVars()) return;\r\n\r\n this.setEvents();\r\n }\r\n\r\n setVars()\r\n {\r\n this.toolbar = document.querySelector('.toolbar__items');\r\n if (!this.toolbar) return;\r\n\r\n this.plusFont = this.toolbar.querySelector('.toolbar__itemLink--a-plus');\r\n this.minusFont = this.toolbar.querySelector('.toolbar__itemLink--a-minus');\r\n\r\n this.header = document.querySelector('.header');\r\n this.logo = this.header.querySelector('.header__logo');\r\n\r\n this.html = document.querySelector('html');\r\n\r\n this.defaultSize = 62.5;\r\n this.diff = 10;\r\n this.unit = '%';\r\n this.counter = 0;\r\n\r\n return true;\r\n }\r\n\r\n setEvents()\r\n {\r\n this.plusFont.addEventListener('click', () => this.biggerFontSize());\r\n this.minusFont.addEventListener('click', () => this.smallerFontSize());\r\n }\r\n\r\n biggerFontSize()\r\n {\r\n console.log(this.logo);\r\n if (this.counter <= 1) {\r\n this.counter++;\r\n this.defaultSize = this.defaultSize + this.diff;\r\n this.html.style.fontSize = this.defaultSize + this.unit;\r\n this.plusFont.classList.remove('toolbar__itemLink--a-plus--deactivate');\r\n this.minusFont.classList.remove('toolbar__itemLink--a-minus--deactivate');\r\n this.logo.classList.add('.header__logo--small');\r\n } else if (this.counter == 2) {\r\n this.plusFont.classList.add('toolbar__itemLink--a-plus--deactivate');\r\n }\r\n } \r\n\r\n smallerFontSize()\r\n {\r\n if (this.counter >= -1) {\r\n this.counter--;\r\n this.defaultSize = this.defaultSize - this.diff;\r\n this.html.style.fontSize = this.defaultSize + this.unit;\r\n this.minusFont.classList.remove('toolbar__itemLink--a-minus--deactivate');\r\n this.plusFont.classList.remove('toolbar__itemLink--a-plus--deactivate');\r\n } else if (this.counter === -2) {\r\n this.minusFont.classList.add('toolbar__itemLink--a-minus--deactivate');\r\n }\r\n }\r\n}\r\n","import anime from 'animejs/lib/anime.es';\r\n\r\nexport default class Hamburger {\r\n\r\n constructor(debug = false) {\r\n\r\n this.debug = debug;\r\n this.TRANSITION_TIME = 350;\r\n\r\n if (this.debug) console.log('Hamburger init');\r\n\r\n if (this.setVars()) {\r\n if (this.debug) console.log('Hamburger vars init done');\r\n this.setEvents();\r\n }\r\n }\r\n\r\n setVars()\r\n {\r\n this.hamburgerEl = document.querySelector('.jsHamburger');\r\n if (!this.hamburgerEl) return false;\r\n\r\n this.menuEl = document.querySelector('[data-hamburger-menu]');\r\n if (!this.menuEl) return false;\r\n\r\n return true;\r\n }\r\n\r\n setEvents()\r\n {\r\n this.hamburgerEl.addEvent('click.Hamburger', (e) => {\r\n e.preventDefault();\r\n\r\n this.onClick();\r\n });\r\n }\r\n\r\n onClick()\r\n {\r\n this.toggleActive();\r\n }\r\n\r\n toggleActive()\r\n {\r\n if (this.hamburgerEl.hasClass('active')) {\r\n this.hamburgerEl.removeClass('active');\r\n this.menuEl.removeClass('active');\r\n\r\n anime({\r\n targets: this.menuEl,\r\n maxHeight: 0,\r\n opacity: 0,\r\n duration: this.TRANSITION_TIME,\r\n easing: 'easeInOutQuad',\r\n // fix for desktop menu disappearing after hamburger open/close\r\n complete: () => {\r\n this.menuEl.removeAttribute('style');\r\n },\r\n });\r\n\r\n } else {\r\n\r\n this.hamburgerEl.addClass('active');\r\n this.menuEl.addClass('active');\r\n\r\n\r\n anime({\r\n targets: this.menuEl,\r\n maxHeight: this.getMenuHeight(),\r\n opacity: 1,\r\n duration: this.TRANSITION_TIME,\r\n easing: 'easeInOutQuad',\r\n });\r\n }\r\n }\r\n\r\n\r\n getMenuHeight()\r\n {\r\n // when menu is shorter than ~100vh\r\n // this.menuEl.style.maxHeight = 'initial';\r\n // const menuHeight = this.menuEl.offsetHeight;\r\n // this.menuEl.style.maxHeight = null;\r\n\r\n // assuming the menu will always be higher than view height\r\n const topMenuStyle = window.getComputedStyle(this.menuEl);\r\n const menuHeight = 'calc(100vh - ' + topMenuStyle.getPropertyValue('top') + ')';\r\n\r\n return menuHeight;\r\n }\r\n}\r\n","import anime from 'animejs/lib/anime.es';\n// import { TweenLite, CSSPlugin } from 'gsap';\nimport { throttle } from '../vendors/helpers/throttle';\n\n\nexport default class Header {\n\n constructor(debug = false)\n {\n this.TRANSITION_TIME = 300;\n this.THROTTLE_DELAY = 50;\n this.IDLE_DETECTION_DELAY = 50;\n this.lastScrollTop = window.scrollTop();\n this.lastBusyScrollTop = window.scrollTop();\n this.scrollUp = false;\n this.headerBottomAnim = false; // for menus with only one row\n this.runningFromRes = 1024;\n\n this.isRunning = {\n hideTop: false,\n showTop: false,\n hideBot: false,\n showBot: false,\n };\n\n this.debug = debug;\n if (this.debug) console.log('Header init');\n\n if (!this.setVars()) return;\n this.setEvents();\n\n if (this.debug) console.log('Header succesful');\n }\n\n setVars()\n {\n this.header = document.querySelector('.header');\n if (!this.header) return;\n\n this.headerTopEl = document.querySelector('[data-header-top]');\n if (!this.headerTopEl) return;\n\n this.headerBotEl = document.querySelector('[data-header-bottom]');\n if (!this.headerBotEl) return;\n\n // optional elements (like scroll to top button)\n // that should get 'active' class when header is in 'sticky' mode\n this.activeElArr = document.querySelectorAll('[data-header-element-active]');\n\n\n this.classes = {\n sticky: 'header--sticky',\n stickyUp: 'header--stickyUp',\n };\n\n this.headerTop = {\n el: this.headerTopEl,\n max: 60,\n min: 0,\n };\n\n this.headerBot = {\n el: this.headerBotEl,\n max: 120,\n min: 30,\n };\n\n this.mobile = false;\n\n return true;\n }\n\n setEvents()\n {\n const mediaMatch = window.matchMedia(`(max-width: ${this.runningFromRes}px)`);\n if (mediaMatch.matches) {\n this.mobile = true;\n this.classes.sticky += 'Mobile';\n this.classes.stickyUp += 'Mobile';\n }\n\n window.addEvent('load', () => {\n this.headerSticky();\n });\n\n window.addEvent('load', () => {\n setTimeout(() => {\n this.headerSticky();\n\n window.addEvent('scroll.Header', throttle(() => {\n this.headerSticky();\n // if (this.debug) console.info('Header throttling...', new Date().toUTCString());\n }, this.THROTTLE_DELAY));\n }, 0);\n });\n\n this.initMenuOnTopActions();\n }\n\n initMenuOnTopActions()\n {\n this.idleInterval = setInterval(() => {\n const scrollDelta = window.scrollTop() - this.lastBusyScrollTop;\n\n this.minimizeHeaderIfNotOnTop(scrollDelta);\n this.maximizeHeaderIfNotOnTop(scrollDelta);\n\n this.lastBusyScrollTop = window.scrollTop();\n\n }, this.IDLE_DETECTION_DELAY);\n }\n\n maximizeHeaderIfNotOnTop(scrollDelta)\n {\n if (window.scrollTop() === 0 && scrollDelta === 0\n && this.header.hasClass(this.classes.sticky)) {\n\n this.header.removeClass(this.classes.sticky);\n this.toggleActiveOnDepenedentElems('remove');\n\n this.showHeaderTop();\n this.showHeaderBottom();\n }\n }\n\n minimizeHeaderIfNotOnTop(scrollDelta)\n {\n if (window.scrollTop() !== 0 && scrollDelta === 0) {\n\n this.hideHeaderBottom();\n\n if (!this.header.hasClass(this.classes.sticky) && window.scrollTop() !== 0) {\n this.header.addClass(this.classes.sticky);\n this.toggleActiveOnDepenedentElems('add');\n this.hideHeaderTop();\n }\n }\n }\n\n headerSticky()\n {\n const MIMUM_DELTA = 50;\n\n const currentScrollTop = window.scrollTop();\n const scrollDelta = currentScrollTop - this.lastScrollTop;\n\n // show top menu on scroll up\n if (scrollDelta > 0) {\n if (scrollDelta > MIMUM_DELTA) {\n if (this.debug) console.log('going down (change)');\n\n this.header.removeClass(this.classes.stickyUp);\n this.header.addClass(this.classes.sticky);\n this.toggleActiveOnDepenedentElems('add');\n\n this.scrollUp = false;\n\n this.hideHeaderTop();\n }\n }\n else if (Math.abs(scrollDelta) > MIMUM_DELTA) {\n if (this.debug) console.log('going up (change)');\n\n this.header.addClass(this.classes.stickyUp);\n\n this.scrollUp = true;\n\n this.showHeaderTop();\n }\n\n this.lastScrollTop = currentScrollTop;\n }\n\n\n hideHeaderTop()\n {\n if (!this.mobile\n && this.isRunning.hideTop === false\n && this.headerTop.el.style.maxHeight !== `${this.headerTop.min}px`) {\n\n anime({\n targets: this.headerTop.el,\n translateY: -1 * parseInt(this.headerTop.max),\n duration: this.TRANSITION_TIME,\n easing: 'easeInOutQuad',\n begin: (/* anim */) => {\n this.isRunning.hideTop = true;\n if (this.debug) console.log('began hideTop');\n },\n complete: (/* anim */) => {\n this.isRunning.hideTop = false;\n if (this.debug) console.log('completed hideTop');\n },\n });\n }\n }\n\n hideHeaderBottom()\n {\n if (!this.mobile\n && this.headerBottomAnim && this.isRunning.hideBot === false\n && this.headerBot.el.style.maxHeight !== `${this.headerBot.min}px`) {\n\n anime({\n targets: this.headerBot.el,\n translateY: -1 * parseInt(this.headerBot.min),\n // maxHeight: this.headerBot.min,\n duration: this.TRANSITION_TIME,\n easing: 'easeInOutQuad',\n begin: (/* anim */) => {\n this.isRunning.hideBot = true;\n if (this.debug) console.log('began hideBot');\n },\n complete: (/* anim */) => {\n this.isRunning.hideBot = false;\n if (this.debug) console.log('completed hideBot');\n },\n });\n }\n }\n\n showHeaderTop()\n {\n if (!this.mobile\n && this.isRunning.showTop === false\n && this.headerTop.el.style.maxHeight !== `${this.headerTop.max}px`) {\n\n anime({\n targets: this.headerTop.el,\n translateY: this.headerTop.min,\n duration: this.TRANSITION_TIME,\n easing: 'easeInOutQuad',\n begin: (/* anim */) => {\n this.isRunning.showTop = true;\n if (this.debug) console.log('began showTop');\n },\n complete: (/* anim */) => {\n this.isRunning.showTop = false;\n if (this.debug) console.log('completed showTop');\n },\n });\n }\n }\n\n showHeaderBottom()\n {\n if (!this.mobile\n && this.headerBottomAnim && this.isRunning.showBot === false\n && this.headerBot.el.style.maxHeight !== `${this.headerBot.max}px`) {\n\n anime({\n targets: this.headerBot.el,\n translateY: this.headerBot.max,\n // maxHeight: this.headerBot.max,\n duration: this.TRANSITION_TIME,\n easing: 'easeInOutQuad',\n begin: (/* anim */) => {\n this.isRunning.showBot = true;\n if (this.debug) console.log('began showBot');\n },\n complete: (/* anim */) => {\n this.isRunning.showBot = false;\n if (this.debug) console.log('completed showBot');\n },\n });\n }\n }\n\n toggleActiveOnDepenedentElems(mode)\n {\n if (!this.activeElArr.length) return;\n\n if (mode === 'remove') {\n this.activeElArr.forEach(el => {\n el.removeClass('active');\n });\n }\n else if (mode === 'add') {\n this.activeElArr.forEach(el => {\n el.addClass('active');\n });\n }\n }\n}\n","/*\r\n\r\n USAGE\r\n\r\n window.addEvent('scroll.HideScroll', throttle(() => {\r\n this.showItems()\r\n }, 50));\r\n\r\n*/\r\n\r\n\r\nfunction throttle(func, limit) {\r\n let inThrottle;\r\n return function () {\r\n const args = arguments;\r\n const context = this;\r\n if (!inThrottle) {\r\n func.apply(context, args);\r\n inThrottle = true;\r\n setTimeout(() => inThrottle = false, limit);\r\n }\r\n };\r\n}\r\n\r\nexport { throttle };\r\n","import GoogleMap from 'fetch-google-maps';\r\n\r\nexport default class Map\r\n{\r\n constructor()\r\n {\r\n if (!this.setVars()) return;\r\n\r\n this.setEvents();\r\n }\r\n\r\n setVars()\r\n {\r\n this.map = document.querySelector('.map');\r\n if (!this.map) return;\r\n\r\n this.API = 'AIzaSyAimnHtzOkNPol1ajAFHF2yi338cvsPmk8';\r\n\r\n return true;\r\n\r\n }\r\n\r\n setEvents()\r\n {\r\n GoogleMap({\r\n apiKey: this.API,\r\n language: 'en',\r\n libraries: ['geometry']\r\n }).then(( Maps ) => {\r\n const map = new Maps.Map(this.map, {\r\n zoom: 15,\r\n center: new Maps.LatLng(24.668979, 46.719128),\r\n styles: [\r\n {\r\n \"elementType\": \"geometry\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#f5f5f5\"\r\n }\r\n ]\r\n },\r\n {\r\n \"elementType\": \"labels.icon\",\r\n \"stylers\": [\r\n {\r\n \"visibility\": \"off\"\r\n }\r\n ]\r\n },\r\n {\r\n \"elementType\": \"labels.text.fill\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#616161\"\r\n }\r\n ]\r\n },\r\n {\r\n \"elementType\": \"labels.text.stroke\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#f5f5f5\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"administrative.land_parcel\",\r\n \"elementType\": \"labels.text.fill\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#bdbdbd\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"poi\",\r\n \"elementType\": \"geometry\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#eeeeee\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"poi\",\r\n \"elementType\": \"labels.text.fill\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#757575\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"poi.park\",\r\n \"elementType\": \"geometry\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#e5e5e5\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"poi.park\",\r\n \"elementType\": \"labels.text.fill\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#9e9e9e\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"road\",\r\n \"elementType\": \"geometry\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#ffffff\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"road.arterial\",\r\n \"elementType\": \"labels.text.fill\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#757575\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"road.highway\",\r\n \"elementType\": \"geometry\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#dadada\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"road.highway\",\r\n \"elementType\": \"labels.text.fill\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#616161\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"road.local\",\r\n \"elementType\": \"labels.text.fill\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#9e9e9e\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"transit.line\",\r\n \"elementType\": \"geometry\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#e5e5e5\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"transit.station\",\r\n \"elementType\": \"geometry\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#eeeeee\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"water\",\r\n \"elementType\": \"geometry\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#c9c9c9\"\r\n }\r\n ]\r\n },\r\n {\r\n \"featureType\": \"water\",\r\n \"elementType\": \"labels.text.fill\",\r\n \"stylers\": [\r\n {\r\n \"color\": \"#9e9e9e\"\r\n }\r\n ]\r\n }\r\n ]\r\n });\r\n });\r\n }\r\n}\r\n","import anime from 'animejs/lib/anime.es';\n\nexport default class MenuMobile\n{\n constructor()\n {\n if (!this.setVars()) return;\n this.setEvents();\n }\n\n setVars()\n {\n const mediaMatch = window.matchMedia(`(max-width: 1023px)`);\n if (mediaMatch.matches) {\n this.mobile = true;\n }\n if(!this.mobile) return;\n\n this.menu = document.querySelector('.topMenu');\n if(!this.menu) return;\n\n this.submenuToggle = [...this.menu.querySelectorAll('[data-header-link]')];\n if(!this.submenuToggle.length) return;\n\n return true;\n }\n\n setEvents()\n {\n this.submenuToggle.forEach(link => {\n link.addEventListener('click', (e) => {\n link.classList.toggle('topMenu__link--rotate');\n this.toggle(e);\n });\n });\n }\n\n toggle(e) {\n const target = e.currentTarget;\n const child = target.parentNode.querySelector('[data-header-link-child]');\n const level = target.dataset.headerLink;\n const openMenus = this.menu.querySelectorAll('.topMenu__subMenu.active');\n let childHeight = target.parentNode.querySelector('.topMenu__subMenu').clientHeight;\n\n if (level === 1 && openMenus && !target.classList.contains('isOpen')) {\n openMenus.forEach(el => {\n el.parentNode.querySelector('[data-header-link]').classList.remove('isOpen');\n anime({\n targets: child,\n opacity: ['1', '0'],\n duration: 400,\n height: [childHeight, 0],\n easing: 'easeInOutCirc',\n complete: () => {\n child.style.height = '';\n el.classList.remove('active');\n }\n });\n });\n }\n\n if (target.classList.contains('isOpen')) {\n let activeChildMenu = target.parentNode.querySelectorAll('.topMenu__subMenu.active');\n target.classList.remove('isOpen');\n\n if (activeChildMenu) {\n activeChildMenu.forEach(el => {\n el.parentNode.querySelector('[data-header-link]').classList.remove('isOpen');\n anime({\n targets: child,\n opacity: ['1', '0'],\n duration: 400,\n height: [childHeight, 0],\n easing: 'easeInOutCirc',\n complete: () => {\n child.style.height = '';\n child.style.opacity = '';\n el.classList.remove('active');\n }\n });\n });\n }\n } else {\n anime({\n targets: child,\n opacity: ['0', '1'],\n duration: 400,\n height: [0, childHeight],\n easing: 'easeInOutCirc',\n complete: () => {\n child.style.height = '';\n child.style.opacity = '';\n }\n });\n child.classList.add('active');\n target.classList.add('isOpen');\n }\n }\n}\n","export default class MenuSearchForm {\r\n\r\n constructor(debug = false)\r\n {\r\n this.debug = debug;\r\n this.debug && console.log('MenuSearchForm init');\r\n\r\n if (this.setVars()) {\r\n this.debug && console.log('MenuSearchForm vars init done');\r\n this.setEvents();\r\n }\r\n }\r\n\r\n setVars()\r\n {\r\n this.menuSearchForm = document.querySelector('.jsMenuSearchForm');\r\n if (!this.menuSearchForm) return false;\r\n\r\n this.buttonActivate = this.menuSearchForm.querySelector('[data-menu-search-activate]');\r\n if (!this.buttonActivate) return false;\r\n\r\n this.pageBackdrop = document.querySelector('[data-modal-backdrop]');\r\n if (!this.pageBackdrop) return false;\r\n\r\n this.menuBackdrop = document.querySelector('[data-menu-search-backdrop]');\r\n if (!this.menuBackdrop) return false;\r\n\r\n this.active = false;\r\n\r\n this.ESC = 27;\r\n\r\n return true;\r\n }\r\n\r\n\r\n setEvents()\r\n {\r\n this.buttonActivate.addEvent('click.menusearch', (e) => {\r\n e.preventDefault();\r\n this.showForm();\r\n });\r\n\r\n this.pageBackdrop.addEvent('click.menusearch', () => {\r\n this.active && this.hideForm();\r\n });\r\n\r\n this.menuBackdrop.addEvent('click.menusearch', (e) => {\r\n const notClickedOnform = !e.target.type\r\n || (e.target.type && e.target.type !== 'text' && e.target.type !== 'submit');\r\n\r\n if (this.active && (notClickedOnform)) {\r\n this.hideForm();\r\n }\r\n });\r\n\r\n document.addEvent('keydown.menusearch', e => {\r\n this.handleKeyEscEvent(e);\r\n });\r\n }\r\n\r\n\r\n showForm()\r\n {\r\n setTimeout(() => {\r\n this.active = true;\r\n }, 50);\r\n\r\n this.menuSearchForm.addClass('active');\r\n this.pageBackdrop.addClass('active');\r\n }\r\n\r\n\r\n hideForm()\r\n {\r\n this.active = false;\r\n this.menuSearchForm.removeClass('active')\r\n this.pageBackdrop.removeClass('active')\r\n }\r\n\r\n handleKeyEscEvent(e)\r\n {\r\n if (e.keyCode !== this.ESC) return;\r\n\r\n this.hideForm();\r\n }\r\n}\r\n","export default class ModalPhotoGallery {\n\n constructor(debug = false)\n {\n this.debug = debug;\n this.debug && console.log('ModalPhotoGallery init');\n\n if (this.setVars()) {\n this.debug && console.log('ModalPhotoGallery vars init done');\n this.setEvents();\n }\n }\n\n setVars()\n {\n this.modalTargetAttr = 'data-modal-photo-gallery-target';\n this.itemsAttr = 'data-modal-photo-gallery';\n\n this.modalPhotoGalleryArr = document.querySelectorAll('.jsModalPhotoGallery');\n if (!this.modalPhotoGalleryArr.length) return false;\n\n this.modalTarget = document.querySelector('['+this.modalTargetAttr+']');\n if (!this.modalTarget) return false;\n\n return true;\n }\n\n setEvents()\n {\n this.initOnClickEvents();\n this.initCardSliderEvents();\n }\n\n initOnClickEvents(reboot = false)\n {\n const elems = reboot\n ? document.querySelectorAll('.jsModalPhotoGallery')\n : this.modalPhotoGalleryArr;\n\n this.debug && console.log('[ModalPhotoGallery] elems', elems);\n\n elems.forEach((itemEl) => {\n itemEl.addEvent('click', (e) => {\n e.preventDefault();\n this.onClick(e);\n });\n });\n }\n\n initCardSliderEvents()\n {\n window.addEventListener('CardSlider__SlideChangeStart', (e) => {\n this.debug && console.log('[ModalPhotoGallery] reattaching events Start', e.detail);\n });\n\n window.addEventListener('CardSlider__SlideChangeEnd', (e) => {\n this.debug && console.log('[ModalPhotoGallery] reattaching events End', e.detail);\n this.initOnClickEvents(true);\n });\n }\n\n onClick(e)\n {\n this.debug && console.log('ModalPhotoGallery click', e.target, e.target.getAttribute(this.itemsAttr));\n\n if (e.target.getAttribute(this.itemsAttr) && e.target.getAttribute(this.itemsAttr).length) {\n this.showModal();\n this.initCardSlider(e);\n }\n }\n\n showModal()\n {\n this.modalTarget.addClass('active');\n document.body.addClass('modal');\n }\n\n initCardSlider(e)\n {\n if (e.target.dataset && e.target.getAttribute(this.itemsAttr)) {\n this.debug && console.log('ModalPhotoGallery custom event sent');\n const event = new CustomEvent('galleryModalShow', { detail: e.target.getAttribute(this.itemsAttr) });\n window.dispatchEvent(event);\n }\n }\n}\n\n","export default class ModalVideoPlayer {\r\n\r\n constructor(debug = false)\r\n {\r\n this.debug = debug;\r\n this.debug && console.log('ModalVideoPlayer init');\r\n\r\n if (this.setVars()) {\r\n this.debug && console.log('ModalVideoPlayer vars init done');\r\n this.setEvents();\r\n }\r\n }\r\n\r\n setVars()\r\n {\r\n this.videoUrl = 'data-video-url';\r\n\r\n this.modalVideoPlayerArr = document.querySelectorAll('.jsModalVideoPlayer');\r\n if (!this.modalVideoPlayerArr.length) return false;\r\n\r\n return true;\r\n }\r\n\r\n setEvents()\r\n {\r\n this.modalVideoPlayerArr.forEach((itemEl) => {\r\n itemEl.addEvent('click', (e) => {\r\n e.preventDefault();\r\n this.onClick(e);\r\n });\r\n });\r\n }\r\n\r\n onClick(e)\r\n {\r\n this.debug && console.log('ModalVideoPlayer click', e.target, e.target.getAttribute(this.videoUrl));\r\n\r\n if (e.target.getAttribute(this.videoUrl)) {\r\n this.initModalVideoPlayer(e);\r\n }\r\n }\r\n\r\n initModalVideoPlayer(e)\r\n {\r\n if (/* e.target.dataset && */e.target.getAttribute(this.videoUrl)) {\r\n this.debug && console.log('ModalVideoPlayer custom event sent', e.target.getAttribute(this.videoUrl));\r\n const event = new CustomEvent('videoModalShow', { detail: e.target.getAttribute(this.videoUrl) });\r\n window.dispatchEvent(event);\r\n }\r\n }\r\n}\r\n\r\n","export default class Print\r\n{\r\n constructor(debug = false)\r\n {\r\n this.debug = debug;\r\n this.debug && console.log('Print init');\r\n\r\n if (this.setVars()) {\r\n this.debug && console.log('Print vars init done');\r\n this.setEvents();\r\n }\r\n }\r\n\r\n setVars()\r\n {\r\n this.printElemsArr = document.querySelectorAll('[data-print]');\r\n if (!this.printElemsArr.length) return;\r\n\r\n return true;\r\n }\r\n\r\n setEvents()\r\n {\r\n this.printElemsArr.forEach((el) => {\r\n el.addEvent('click.print', e => {\r\n e.preventDefault();\r\n this.printInit();\r\n });\r\n });\r\n }\r\n\r\n printInit()\r\n {\r\n this.debug && console.log('print init');\r\n window.print();\r\n }\r\n}\r\n","import Swiper from 'swiper/js/swiper';\r\n\r\n\r\nexport default class ProgramsCarousel\r\n{\r\n constructor()\r\n {\r\n if (!this.setVars()) return;\r\n this.numberOfSlides();\r\n this.setEvents();\r\n }\r\n\r\n setVars()\r\n {\r\n this.carousel = document.querySelector('.programs__carousel');\r\n if (!this.carousel) return;\r\n\r\n this.next = document.querySelector('.programs__next');\r\n this.prev = document.querySelector('.programs__prev');\r\n\r\n this.bp = {\r\n largePhone : 480,\r\n tablet : 767,\r\n largeTablet : 1023,\r\n laptop : 1279, \r\n }\r\n\r\n this.swiper = null;\r\n\r\n this.items = 4;\r\n\r\n return true;\r\n }\r\n\r\n setEvents()\r\n {\r\n window.addEventListener('resize', () => {\r\n this.numberOfSlides();\r\n });\r\n this.buildSlider();\r\n\r\n }\r\n\r\n\r\n buildSlider()\r\n {\r\n this.swiper = new Swiper(this.carousel, {\r\n loop: true,\r\n spaceBetween: 8,\r\n slidesPerView: this.items,\r\n navigation: {\r\n nextEl: this.next,\r\n prevEl: this.prev,\r\n },\r\n autoplay: {\r\n delay : 2000,\r\n disableOnInteraction : false,\r\n },\r\n });\r\n }\r\n\r\n regenerateSlider()\r\n {\r\n if (this.swiper !== null) {\r\n this.swiper.destroy(true, false);\r\n }\r\n this.buildSlider();\r\n }\r\n\r\n checkIfRegenrate(numberOfItems)\r\n {\r\n if (this.items !== numberOfItems) {\r\n this.items = numberOfItems;\r\n this.regenerateSlider();\r\n }\r\n }\r\n\r\n numberOfSlides()\r\n {\r\n const width = window.innerWidth;\r\n\r\n if (width > this.bp.laptop) {\r\n this.checkIfRegenrate(4);\r\n } else if (width <= this.bp.laptop && width > this.bp.tablet ) {\r\n this.checkIfRegenrate(3);\r\n } else if (width <= this.bp.tablet && width > this.bp.largePhone ) {\r\n this.checkIfRegenrate(2);\r\n } else if (width <= this.bp.largePhone ) {\r\n this.checkIfRegenrate(1);\r\n }\r\n }\r\n\r\n}\r\n","export default class ReusableCopy {\r\n\r\n constructor(debug = false)\r\n {\r\n this.debug = debug;\r\n this.debug && console.log('ReusableCopy init');\r\n\r\n if (this.setVars()) {\r\n this.debug && console.log('ReusableCopy vars init done');\r\n this.setEvents();\r\n }\r\n }\r\n\r\n setVars()\r\n {\r\n // this.ReusableCopyArr = [...document.querySelectorAll('.jsReusableCopy')];\r\n this.ReusableCopyArr = document.querySelectorAll('.jsReusableCopy');\r\n if (!this.ReusableCopyArr.length) return false;\r\n\r\n return true;\r\n }\r\n\r\n setEvents()\r\n {\r\n this.ReusableCopyArr.forEach((itemEl) => {\r\n itemEl.addEvent('click', (e) => {\r\n e.preventDefault();\r\n this.onClick(e);\r\n });\r\n });\r\n }\r\n\r\n onClick(e)\r\n {\r\n window.getSelection().selectAllChildren(e.target);\r\n document.execCommand('copy');\r\n console.log('classes copied to clipboard');\r\n\r\n }\r\n}\r\n","// import { ScrollToPlugin } from 'gsap/ScrollToPlugin'; // eslint-disable-line no-unused-vars\n// import { CSSPlugin } from \"gsap/CSSPlugin\";\n// import anime from 'animejs/lib/anime.es';\n\n\n/**\n * Usage:\n *
\n *\n * Params:\n * - data-scrollto-speed: pixels / animation frame (default 100, has priority over duration parameter)\n * - data-scrollto-duration: in miniseconds, independent of page height\n * - data-scrollto-id: target element to scroll-to (not supported yet), by default scrolls to page top\n */\n\n// UNDER CONSTRUCTION\n\nexport default class ScrollTo {\n\n constructor(debug = false) {\n\n this.debug = debug;\n\n this.debug && console.log('ScrollTo init');\n\n if (this.setVars()) {\n this.debug && console.log('ScrollTo vars init done');\n this.setEvents();\n }\n }\n\n setVars() {\n\n this.scrollToArr = document.querySelectorAll('.jsScrollTo');\n if (!this.scrollToArr) return false;\n\n return true;\n }\n\n setEvents() {\n this.scrollToArr.each((itemEl) => {\n itemEl.addEvent('click.ScrollTo', (e) => {\n this.debug && console.log('ScrollTo clicked');\n e.preventDefault();\n this.onClick(e);\n });\n });\n }\n\n onClick(e) {\n e.preventDefault();\n\n let fps = e.target.getAttribute('data-scrollto-fps');\n fps = fps ? parseInt(fps) : 30;\n\n const scrollToTargetId = e.target.getAttribute('data-scrollto-id');\n\n let scrollToOffset = e.target.getAttribute('data-scrollto-offset');\n scrollToOffset = scrollToOffset ? parseInt(scrollToOffset) : 0;\n\n let scrollToDuration = null;\n let scrollToSpeed = e.target.getAttribute('data-scrollto-speed');\n if (!scrollToSpeed) {\n scrollToDuration = e.target.getAttribute('data-scrollto-duration');\n scrollToDuration = scrollToDuration ? parseFloat(scrollToDuration) : 100;\n }\n\n this.debug && console.log('ScrollTo fps', fps);\n this.debug && console.log('ScrollTo scrollToTargetId', scrollToTargetId);\n\n\n /**\n * Just checking how requestAnimationFrame works\n * looking for good enoung alternative to anime.js - just for scrolling\n */\n\n function animate(callback, fps, props) {\n fps = fps || 30;\n\n let raFrameId = false;\n const interval = 1000/fps;\n\n/*\n // alternative version with timeout - wrong timings\n const tick = () => {\n raFrameId = requestAnimationFrame(tick);\n callback(props);\n console.log('RAF call - scrollDuration / interval / timePassed', scrollToDuration, interval, Math.round(performance.now() - props.t0));\n }\n\n setTimeout(() => {\n tick()\n }, 1000/fps);\n */\n\n // alternative version without timeout\n let last = Date.now(); // let last = performance.now();\n const tick = () => {\n raFrameId = requestAnimationFrame(tick);\n const now = Date.now(); // const now = performance.now();\n const elapsed = now - last;\n\n if (elapsed > interval) {\n last = now - (elapsed - interval); // correction for ticks missing its time slots\n // console.log('RAF call', interval, Math.round(performance.now() - props.t0));\n callback(props);\n }\n }\n tick();\n\n\n return {\n stop: () => {\n cancelAnimationFrame(raFrameId);\n raFrameId = false;\n },\n\n resume: () => {\n if (raFrameId === false)\n tick();\n }\n }\n }\n\n const scrollPosition = window.document.documentElement.scrollTop || window.document.body.scrollTop;\n let steps = 0;\n\n this.FRAMERATE = fps;\n this.STEP = scrollToSpeed;\n if (!scrollToSpeed) {\n this.STEP = (scrollPosition - scrollToOffset) / ((scrollToDuration / 1000) * this.FRAMERATE);\n }\n\n const scrollFunc = ({ step, totalSteps, offset }) => {\n const scrollTopCurrent = document.documentElement.scrollTop || document.body.scrollTop;\n\n let stepCorrected = step;\n if (!scrollToSpeed) {\n stepCorrected = (scrollTopCurrent) / ((scrollToDuration / 1000) * this.FRAMERATE - steps);\n }\n this.debug && console.log('scrollTop - moving', stepCorrected);\n\n if (scrollTopCurrent > offset) {\n // if (steps < totalSteps) {\n // this.debug && console.log('scrollTop - moving', scrollTopCurrent, stepCorrected, Math.round(performance.now() - t0));\n document.documentElement.scrollTop = document.body.scrollTop = (scrollTopCurrent - stepCorrected);\n steps++;\n }\n else {\n Animator.stop();\n\n const t1 = performance.now();\n this.debug && console.log('scrollTop - stop / scrollTop / steps / framerate / requestedDuration / realDuration',\n scrollTopCurrent + \"px\", Math.round(step) + \"px/step\", steps + \"steps\", totalSteps + \"totalSteps\", this.FRAMERATE + 'fps', scrollToDuration + 'ms', Math.round(t1 - t0) + 'ms');\n }\n };\n\n this.debug && console.log('scrollPosition', scrollPosition + \"px\");\n const t0 = performance.now();\n const Animator = animate(scrollFunc, this.FRAMERATE, {\n step: this.STEP,\n totalSteps: (scrollToDuration / 1000) * this.FRAMERATE,\n offset: 0 + scrollToOffset,\n t0: t0,\n });\n\n /**\n * End RAF testing\n */\n\n\n // this.debug && console.log('ScrollTo params: ', scrollElement, scrollToOffset, scrollToDuration);\n // const scrollElement = window.document.scrollingElement\n // || window.document.body || window.document.documentElement;\n // anime({\n // targets: scrollElement,\n // scrollTop: 0 + scrollToOffset,\n // duration: scrollToDuration,\n // easing: 'easeInOutQuad',\n // });\n\n // TweenLite.killTweensOf(window);\n // TweenLite.to(window, scrollToSpeed, {\n // // scrollTo: { y:\"#\"+scrollToTargetId, offsetY:scrollToOffset },\n // scrollTo: { y: scrollToTargetId ? '#' + scrollToTargetId : 0, offsetY: scrollToOffset },\n // ease: Quad.easeInOut,\n // });\n }\n}\n","// import { throttle } from '../vendors/helpers/throttle';\r\n// import IntersectionObserver from 'intersection-observer-polyfill';\r\n\r\n/*\r\n Usage:\r\n\r\n Args:\r\n data-show-on-scroll-threshold - when to show - use thresholds from this.THRESHOLD_ARR\r\n when no threshold given uses this.THRESHOLD_DEFAULT\r\n\r\n Example:\r\n
![]()
\r\n\r\n !! Remember to add styles to make it work:\r\n html\\src\\scss\\vendors\\_showOnScroll.scss\r\n\r\n*/\r\n\r\n\r\nexport default class ShowOnScroll {\r\n\r\n constructor(debug = false) {\r\n this.debug = debug;\r\n if (this.debug) console.log('ShowOnScroll init');\r\n\r\n if (this.setVars()) this.setEvents();\r\n }\r\n\r\n\r\n setVars()\r\n {\r\n this.items = document.querySelectorAll('.showOnScroll');\r\n // this.elemsArr = [...document.querySelectorAll('.showOnScroll')];\r\n this.elemsNodeList = document.querySelectorAll('.showOnScroll');\r\n\r\n if (!this.items) return;\r\n\r\n this.SCROLL_THROTTLE = 50;\r\n this.SCROLL_THROTTLE = 50;\r\n this.offsetTop = 70;\r\n this.offsetBottom = 50;\r\n this.delay = 100;\r\n this.list = [];\r\n this.showList = [];\r\n\r\n this.DELAY_INIT = 1000;\r\n this.CSS_TRANSITON_TIME = 1000;\r\n this.THRESHOLD_DEFAULT = 0.5;\r\n // eslint-disable-next-line no-magic-numbers\r\n this.THRESHOLD_ARR = [0, 0.5, 1];\r\n\r\n return true;\r\n }\r\n\r\n\r\n setEvents()\r\n {\r\n this.debug && console.log('ShowOnScroll setEvents');\r\n\r\n this.elemsNodeList.forEach((el) => {\r\n el.addClass('showOnScroll--hidden');\r\n // console.log('el', el, el.classList);\r\n });\r\n\r\n setTimeout(() => {\r\n this.setupObserver();\r\n setTimeout(() => {\r\n // this.elemsNodeList.forEach(this.observer.observe.bind(this.observer));\r\n this.elemsNodeList.forEach((el) => {\r\n // if (this.debug) console.log('setting observer to: ', el);\r\n this.observer.observe(el);\r\n });\r\n }, this.DELAY_INIT);\r\n }, 0);\r\n\r\n this.setupObserver();\r\n }\r\n\r\n setupObserver()\r\n {\r\n const options = {\r\n // root: document.querySelector('main'),\r\n // rootMargin: '0px',\r\n // threshold: [this.THRESHOLD_DEFAULT],\r\n threshold: this.THRESHOLD_ARR,\r\n };\r\n\r\n const callback = (entries/* , observer */) => {\r\n // console.log(entries, observer);\r\n\r\n this.doActionsForIntersect(entries.filter(el => el.isIntersecting === true));\r\n };\r\n\r\n this.observer = new IntersectionObserver(callback, options);\r\n }\r\n\r\n // eslint-disable-next-line class-methods-use-this\r\n doActionsForIntersect(entries)\r\n {\r\n let key = 0;\r\n const TIME_SEPARATOR = 100;\r\n entries.forEach((entry) => {\r\n\r\n setTimeout(() => {\r\n\r\n let elTreshold = parseFloat(entry.target.getAttribute('data-show-on-scroll-threshold'));\r\n elTreshold = Number.isNaN(elTreshold) ? this.THRESHOLD_DEFAULT : 0;\r\n\r\n if (this.debug) console.log('checking', entry.intersectionRatio, elTreshold, entry.target);\r\n\r\n\r\n if (entry.intersectionRatio >= elTreshold) {\r\n // if (this.debug) console.log('showing', entry.target, entry);\r\n\r\n this.observer.unobserve(entry.target);\r\n entry.target.addClass('showOnScroll--active');\r\n\r\n setTimeout(() => {\r\n\r\n if (this.debug) {\r\n console.log('removig animation classes from: ',\r\n entry.intersectionRatio, elTreshold, entry.target);\r\n }\r\n\r\n entry.target.removeClass('showOnScroll');\r\n entry.target.removeClass('showOnScroll--left');\r\n entry.target.removeClass('showOnScroll--right');\r\n entry.target.removeClass('showOnScroll--hidden');\r\n entry.target.removeClass('showOnScroll--active');\r\n }, this.CSS_TRANSITON_TIME);\r\n }\r\n\r\n }, TIME_SEPARATOR * key);\r\n\r\n key++;\r\n });\r\n }\r\n}\r\n","export default class Socials\r\n{\r\n constructor()\r\n {\r\n if (!this.setVars()) return;\r\n\r\n this.checkLocation();\r\n this.setEvents();\r\n }\r\n\r\n setVars()\r\n {\r\n this.share = document.querySelector('.toolbar__itemLink--share');\r\n if (!this.share) return;\r\n\r\n this.socials = document.querySelector('.socials');\r\n if (!this.socials) return;\r\n\r\n this.items = [...this.socials.querySelectorAll('.socials__item')];\r\n\r\n this.base = 'http://www.sidf.gov.sa/';\r\n\r\n this.linkedin = 'https://www.linkedin.com/shareArticle/?mini=true&url=';\r\n this.facebook = 'https://www.facebook.com/sharer/sharer.php?u=';\r\n this.twitter = 'https://twitter.com/intent/tweet?original_referer=';\r\n\r\n return true;\r\n\r\n }\r\n\r\n setEvents()\r\n {\r\n this.share.addEventListener('click', () => {\r\n this.socials.classList.toggle('socials--active');\r\n });\r\n\r\n this.items.forEach( item => {\r\n const social = item.getAttribute('data-social');\r\n this.checkSocial(item, social);\r\n }) \r\n }\r\n\r\n\r\n checkLocation()\r\n {\r\n this.host = window.location.host.split(':')[0];\r\n if (this.host !== 'localhost') {\r\n this.base = window.location.href;\r\n }\r\n\r\n }\r\n\r\n checkSocial(item, data)\r\n {\r\n switch(data) {\r\n case 'facebook':\r\n item.addEventListener('click', () => {\r\n window.open(this.facebook + this.base, '_blank', 'toolbar=0,location=0,menubar=0');\r\n })\r\n break;\r\n case 'twitter':\r\n item.addEventListener('click', () => {\r\n window.open(this.twitter + this.base, '_blank', 'toolbar=0,location=0,menubar=0');\r\n })\r\n break;\r\n case 'linkedin':\r\n item.addEventListener('click', () => {\r\n window.open(this.linkedin + this.base, '_blank', 'toolbar=0,location=0,menubar=0');\r\n })\r\n break;\r\n default: \r\n break;\r\n }\r\n }\r\n}\r\n","export default class WcagKeyboardNavig {\r\n\r\n constructor(debug = false) {\r\n\r\n this.debug = debug;\r\n\r\n if (this.debug) console.log('WcagKeyboardNavig init');\r\n\r\n if (this.setVars()) {\r\n if (this.debug) console.log('WcagKeyboardNavig vars init done');\r\n this.setEvents();\r\n }\r\n }\r\n\r\n setVars()\r\n {\r\n this.TAB = 9;\r\n this.ESC = 27;\r\n this.ENTER = 13;\r\n this.ARROW_LEFT = 37;\r\n this.ARROW_UP = 38;\r\n this.ARROW_RIGHT = 39;\r\n this.ARROW_DOWN = 40;\r\n\r\n this.navigType = 'data-wcag-navig-type';\r\n this.navigClass = 'wcga';\r\n\r\n this.wcgaKeyDown = false;\r\n\r\n this.appState = '';\r\n this.tabNodes = null;\r\n\r\n this.nodeSelected = {\r\n menuItem: 0,\r\n menuSubItem: 0,\r\n menuSubId: 0,\r\n menuSubSubId: 0,\r\n };\r\n\r\n return true;\r\n }\r\n\r\n\r\n setEvents()\r\n {\r\n document.addEvent('keydown.wcag', (e) => {\r\n this.handleKeyDownEvent(e);\r\n });\r\n\r\n document.body.addEvent('click.wcag', () => {\r\n this.removeKeyboardNavigationClass();\r\n });\r\n }\r\n\r\n\r\n handleKeyDownEvent(e)\r\n {\r\n this.checkKeyDownAndExecuteAction(e);\r\n this.updateMenuKeyboardNavigationClass();\r\n }\r\n\r\n\r\n updateMenuKeyboardNavigationClass()\r\n {\r\n if (this.wcgaKeyDown) {\r\n this.addKeyboardNavigationClass();\r\n }\r\n else {\r\n this.removeKeyboardNavigationClass();\r\n }\r\n }\r\n\r\n\r\n addKeyboardNavigationClass()\r\n {\r\n document.body.addClass(this.navigClass);\r\n }\r\n\r\n\r\n removeKeyboardNavigationClass()\r\n {\r\n document.body.removeClass(this.navigClass);\r\n }\r\n\r\n\r\n checkKeyDownAndExecuteAction(e)\r\n {\r\n this.wcgaKeyDown = true;\r\n\r\n // e.shiftKey true/false\r\n switch (e.keyCode) {\r\n case this.TAB:\r\n this.handleTab(e, e.shiftKey);\r\n break;\r\n case this.ESC:\r\n this.handleEsc(e);\r\n break;\r\n case this.ENTER:\r\n this.handleEnter(e);\r\n break;\r\n case this.ARROW_LEFT:\r\n // this.handleArrowUp(e);\r\n break;\r\n case this.ARROW_UP:\r\n this.handleArrowUp(e);\r\n break;\r\n case this.ARROW_RIGHT:\r\n // this.handleArrowDown(e);\r\n break;\r\n case this.ARROW_DOWN:\r\n this.handleArrowDown(e);\r\n break;\r\n default:\r\n this.wcgaKeyDown = false;\r\n }\r\n }\r\n\r\n\r\n handleEnter(e)\r\n {\r\n const { target } = e;\r\n const targetType = target.getAttribute(this.navigType);\r\n\r\n (targetType === 'menu') && this.openMenu(target);\r\n\r\n if (targetType === 'submenu') {\r\n this.openSubMenu(target);\r\n }\r\n }\r\n\r\n\r\n handleTab(e, reverse = false)\r\n {\r\n this.debug && console.log('tab pressed (reverse)', reverse);\r\n\r\n if (this.appState === 'menuOpen') {\r\n e.preventDefault();\r\n this.nodeSelected.menuSubId = this.calculateNextMenuSubId(this.nodeSelected.menuSubId, reverse);\r\n this.tabNodes[this.nodeSelected.menuSubId].querySelector(':scope > a').focus();\r\n\r\n console.log(this.tabNodes.length, this.nodeSelected);\r\n }\r\n\r\n if (this.appState === 'menuSubOpen') {\r\n e.preventDefault();\r\n this.nodeSelected.menuSubSubId = this.calculateNextMenuSubId(this.nodeSelected.menuSubSubId, reverse);\r\n this.tabNodes[this.nodeSelected.menuSubSubId].querySelector(':scope > a').focus();\r\n\r\n console.log(this.tabNodes.length, this.nodeSelected);\r\n }\r\n }\r\n\r\n handleArrowDown(e)\r\n {\r\n const { target } = e;\r\n const targetType = target.getAttribute(this.navigType);\r\n\r\n if (this.appState === 'menuOpen' || this.appState === 'menuSubOpen') {\r\n this.handleTab(e, false);\r\n }\r\n else {\r\n (targetType === 'menu') && this.openMenu(target);\r\n }\r\n }\r\n\r\n\r\n handleArrowUp(e)\r\n {\r\n if (this.appState === 'menuOpen' || this.appState === 'menuSubOpen') {\r\n this.handleTab(e, true);\r\n }\r\n }\r\n\r\n\r\n openMenu(target)\r\n {\r\n const selectedMenuItem = target.parentElement;\r\n\r\n this.appState = 'menuOpen';\r\n this.nodeSelected.menuItem = target.parentElement;\r\n this.toggleClass(selectedMenuItem, 'active');\r\n this.tabNodes = selectedMenuItem.querySelectorAll(':scope > ul > li');\r\n this.tabNodes[this.nodeSelected.menuSubId].querySelector(':scope > a').focus();\r\n\r\n this.debug && console.log('enter subMenu', this.tabNodes);\r\n }\r\n\r\n\r\n openSubMenu(target)\r\n {\r\n const selectedMenuItem = target.parentElement;\r\n\r\n this.appState = 'menuSubOpen';\r\n this.nodeSelected.menuSubItem = target.parentElement;\r\n this.toggleClass(selectedMenuItem, 'active');\r\n this.tabNodes = selectedMenuItem.querySelectorAll(':scope > ul > li');\r\n this.tabNodes[this.nodeSelected.menuSubSubId].querySelector(':scope > a').focus();\r\n\r\n this.debug && console.log('enter subSubMenu', this.tabNodes);\r\n }\r\n\r\n\r\n calculateNextMenuSubId(nodeId, reverse)\r\n {\r\n let idToSelect;\r\n\r\n if (reverse) {\r\n if (nodeId === 0) {\r\n idToSelect = this.tabNodes.length - 1;\r\n }\r\n else {\r\n idToSelect = (nodeId - 1) % this.tabNodes.length;\r\n }\r\n }\r\n else {\r\n idToSelect = (nodeId + 1) % this.tabNodes.length;\r\n }\r\n\r\n return idToSelect;\r\n }\r\n\r\n\r\n handleEsc()\r\n {\r\n // console.log('esc pressed', this.nodeSelected.menuItem);\r\n\r\n if (this.appState === 'menuOpen' || this.appState === 'menuSubOpen') {\r\n if (this.nodeSelected.menuItem) {\r\n this.nodeSelected.menuItem.querySelector(':scope > a').focus();\r\n this.nodeSelected.menuItem.removeClass('active');\r\n\r\n this.appState = '';\r\n this.tabNodes = null;\r\n this.nodeSelected.menuSubId = 0;\r\n this.nodeSelected.menuSubSubId = 0;\r\n }\r\n if (this.nodeSelected.menuSubItem) {\r\n this.nodeSelected.menuSubItem.removeClass('active');\r\n }\r\n }\r\n }\r\n\r\n // eslint-disable-next-line class-methods-use-this\r\n toggleClass(el, className)\r\n {\r\n if (el.hasClass(className)) {\r\n el.removeClass(className);\r\n }\r\n else {\r\n el.addClass(className);\r\n }\r\n }\r\n}\r\n","// import { CircleSlider } from './CircleSlider';\nimport Accordion from './Accordion';\nimport AnimOffObserver from './AnimOffObserver';\nimport Carousel from './Carousel';\nimport Contrast from './Contrast';\nimport FontSize from './FontSize';\nimport Hamburger from './Hamburger';\nimport Header from './Header';\nimport Map from './Map';\nimport MenuMobile from './MenuMobile';\nimport MenuSearchForm from './MenuSearchForm';\nimport ModalPhotoGallery from './ModalPhotoGallery';\nimport ModalVideoPlayer from './ModalVideoPlayer';\nimport Print from './Print';\nimport ProgramsCarousel from './ProgramsCarousel';\nimport ReusableCopy from './ReusableCopy';\nimport ScrollTo from './ScrollTo';\nimport ShowOnScroll from './ShowOnScroll';\nimport Socials from './Socials';\nimport WcagKeyboardNavig from './WcagKeyboardNavig';\n// import VideoPlayer from './VideoPlayer';\n// import PageableStarter from './PageableStarter';\n\nclass Core {\n // constructor() {\n // console.log('running core..');\n // }\n\n static run(stage) {\n // console.log('running core..', stage);\n\n window.PhotoGallery = ModalPhotoGallery;\n window.VideoGallery = ModalVideoPlayer;\n window.ScrollFunction = ScrollTo;\n window.ShowOnScroll = ShowOnScroll;\n window.MobileMenu = MenuMobile;\n window.Hamburger = Hamburger;\n window.pageHeader = Header;\n\n switch (stage) {\n case 'dom':\n new Contrast();\n new FontSize();\n new Hamburger();\n new Header();\n new WcagKeyboardNavig();\n new MenuMobile();\n new MenuSearchForm();\n new Print();\n break;\n\n case 'page':\n new ReusableCopy();\n break;\n\n case 'vue':\n new Accordion();\n new AnimOffObserver();\n new Carousel();\n new Map();\n new ModalPhotoGallery();\n new ModalVideoPlayer();\n new ProgramsCarousel();\n new ScrollTo();\n new ShowOnScroll();\n new Socials();\n break;\n }\n }\n}\n\nconst readyDOM = (fn) => {\n if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') {\n fn();\n } else {\n document.addEventListener('DOMContentLoaded', fn);\n }\n};\n\nconst readyPage = (fn) => {\n window.addEventListener('load', fn);\n};\n\nreadyDOM(() => {\n console.log('[_Core.js] (dom) ready');\n Core.run('dom');\n});\n\nreadyPage(() => {\n console.log('[_Core.js] (page) ready');\n Core.run('page');\n});\n\nwindow.addEventListener('vueMounted', () => {\n console.log('[_Core.js] vue mounted event (vue)');\n Core.run('vue');\n});\n\n","\nvar content = require(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CardSlider.vue?vue&type=style&index=0&id=1562c182&scoped=true&lang=scss&\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CardSlider.vue?vue&type=style&index=0&id=1562c182&scoped=true&lang=scss&\", function() {\n\t\tvar newContent = require(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CardSlider.vue?vue&type=style&index=0&id=1562c182&scoped=true&lang=scss&\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","\nvar content = require(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DonutChart.vue?vue&type=style&index=0&id=267c0aa6&scoped=true&lang=scss&\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DonutChart.vue?vue&type=style&index=0&id=267c0aa6&scoped=true&lang=scss&\", function() {\n\t\tvar newContent = require(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DonutChart.vue?vue&type=style&index=0&id=267c0aa6&scoped=true&lang=scss&\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","\nvar content = require(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HomeSlider.vue?vue&type=style&index=0&id=2ab9d28e&scoped=true&lang=scss&\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HomeSlider.vue?vue&type=style&index=0&id=2ab9d28e&scoped=true&lang=scss&\", function() {\n\t\tvar newContent = require(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HomeSlider.vue?vue&type=style&index=0&id=2ab9d28e&scoped=true&lang=scss&\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","\nvar content = require(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SimpleTabs.vue?vue&type=style&index=0&id=5a38190e&scoped=true&lang=scss&\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SimpleTabs.vue?vue&type=style&index=0&id=5a38190e&scoped=true&lang=scss&\", function() {\n\t\tvar newContent = require(\"!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--7-3!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SimpleTabs.vue?vue&type=style&index=0&id=5a38190e&scoped=true&lang=scss&\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}"],"sourceRoot":""}